<!--  -->
<template>
    <div style="" :style="{background:global_bg_color}">

        <el-menu router :collapse="isCollapseSideBar" :default-active="activeIndex"  class="el-menu-vertical-demo"
            :background-color="global_bg_color" text-color="#fff" active-text-color="#ffd04b" >

            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-home"></i>
                    <span>主界面</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/">欢迎</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span>用户管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/teacher">教师管理</el-menu-item>
                    <el-menu-item index="/student">学生管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

             <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-s-order"></i>
                    <span>题库管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="">题目管理</el-menu-item>
                    <el-menu-item index="">试卷管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-s-promotion"></i>
                    <span>基础数据管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="">教材版本</el-menu-item>
                    <el-menu-item index="">学科管理</el-menu-item>
                    <el-menu-item index="">章节管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

             <el-submenu index="5" >
                <template slot="title">
                    <i class="el-icon-s-platform"></i>
                    <span>网站管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="">投诉管理</el-menu-item>
                    <el-menu-item index="">留言管理</el-menu-item>
                    <el-menu-item index="">数据字典</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
/* eslint-disable */ // 忽略该行往下 eslint的错误

    // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from "vuex";

    export default {
        // import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            // 这里存放数据
            return {
              activeIndex:'/'
            };
        },
        // 监听属性 类似于data概念
        computed: {
            ...mapState(["global_bg_color", "isCollapseSideBar"])
        },
        // 监控data中的数据变化
        watch: {
          '$route'(){
            this.activeIndex =  this.$route.path
          }
        },
        // 方法集合
        methods: {},
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {},
        // 生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
          this.activeIndex =  this.$route.path
        }
    };

</script>
<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
    }

</style>
